<template>
  <div class="w-full print-style relative bg-white">
    <div class="border border-solid w-[340px] h-[200px]">
      <div class="w-full text-center my-6 text-[20px]">{{ formatData?.checkoutWard }}</div>
      <div class="px-3">
        <div class="flex items-center text-[12px] w-full mb-2">
          <div class="w-[50px] container">姓名：</div>
          <div class="border border-solid border-x-0 border-t-0 p-1 flex items-center flex-1">
            <div class="mr-16">{{ formatData?.brName }}</div>
            <div class="mr-16">{{ formatData?.brXb }}</div>
            <div>{{ formatData?.brAge || '-' }}岁</div>
          </div>
        </div>
        <div class="flex justify-between items-center text-[12px] w-full mb-2">
          <div class="flex items-center w-3/5 pr-5">
            <div class="w-[50px] container">住院号：</div>
            <div class="border border-solid border-x-0 border-t-0 p-1 flex-1">{{ formatData?.admissionCode }}</div>
          </div>
          <div class="flex items-center w-2/5">
            <div class="w-[40px] container">医生：</div>
            <div class="border border-solid border-x-0 border-t-0 p-1 flex-1">{{ formatData?.doctor }}</div>
          </div>
        </div>
        <div class="flex items-center text-[12px] w-full mb-2">
          <div class="w-[50px] container">诊断：</div>
          <div class="border border-solid border-x-0 border-t-0 p-1 flex items-center flex-1">
            {{ formatData?.icd10Name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const formatData = ref({})

watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail.length) {
      formatData.value = props.printData.printData?.detail[0]
    }
  }
)
</script>
<style lang="less" scoped>
@media print {
  @page {
    size: 110mm 80mm;
  }
}

.container {
  text-align: justify;
  text-align-last: justify; /* 强制一行文字也两端对齐 */
}
</style>
